<template>
  <div class="bannerbox">
    <div>
      <el-dialog
        title="添加文章"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <br />
        <span class="tip">添加标题</span>
        <el-input
          v-model="input00"
          style="width: 900px; margin-top: 10px; margin-left: 10px"
        ></el-input>
        <br />
        <span class="tip"> 添加时间</span>
        <el-input
          v-model="input000"
          style="width: 900px; margin-top: 10px; margin-left: 10px"
        ></el-input>
        <br />
        <span class="tip">添加图片</span>
        <el-input
          v-model="input0000"
          style="width: 900px; margin-top: 10px; margin-left: 10px"
        ></el-input>
        <div class="content"><span>正文内容</span></div>
        <!-- 富文本编辑器 -->
        <BannerWangEditor />
        <el-button
          type="primary"
          style="width: 150px; margin-top: 10px"
          @click="submitArctile"
          >提交</el-button
        >
        <span slot="footer" class="dialog-footer" style="z-index: 30000">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <div class="banner-box">
      <el-button type="text" @click="dialogVisible = true">添加文章</el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="100"> </el-table-column>
        <el-table-column prop="title" label="标题" width="300">
        </el-table-column>
        <el-table-column prop="addtime" label="添加时间" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.$index, scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="editor" v-if="isShow">
        <el-card class="box-card">
          <div>编辑</div>
          编辑标题<el-input
            v-model="input"
            style="width: 600px; margin-top: 70px; margin-left: 10px"
          ></el-input
          ><br />
          编辑时间<el-input
            v-model="input1"
            style="
              width: 600px;
              margin-top: 10px;
              margin-bottom: 30px;
              margin-left: 10px;
            "
          ></el-input
          ><br />
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="no">取消</el-button>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import BannerWangEditor from "./BannerWangEditor";
import api from "../../../api";

export default {
  name: "Banner",
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      input: "",
      input1: "",
      isShow: false,
      ruleForm: "",
      codeId: "",
      input00: "",
      input000: "",
      input0000: "",
    };
  },
  methods: {
    http() {
      api.getSearchBanner({ search: "" }).then((res) => {
        this.tableData = res.data;
      });
    },
    handleClose() {},
    // 编辑
    handleClick(index, row) {
      this.isShow = !this.isShow;
      console.log(index, row);
      this.codeId = row.id;
    },

    // 删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api
            .getDeleteBanner({
              id: row.id,
            })
            .then((res) => {
              console.log(row.id);
              if (res.data.status === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.http();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //提交修改
    submitForm() {
      console.log(this.codeId,this.input,this.input1);
     api.getUpdateBanner({
       id:this.codeId,
       title:this.input,
       time:this.input1
     }).then((res)=>{
       console.log(res.data);
       this.isShow = false;

     })
      
    },
    //取消
    no() {
      this.isShow = false;
    },
    // 提交添加文章
    submitArctile() {
      api
        .getInsertBanner({
          title: this.input00,
          time: this.input000,
        })
        .then((res) => {
          console.log(res.data);
          this.dialogVisible=false
        });
    },
  },
  components: {
    BannerWangEditor,
  },
  mounted() {
    this.http();
  },
};
</script>

<style scoped>
.banner-btn {
  margin-left: -850px;
  margin-bottom: 20px;
  width: 150px;
  height: 40px;
  border-radius: 10px;
  outline: none;
}
.banner-box {
  position: absolute;
  top:130px;
  left: 376px;
  width: 1000px;
  z-index: 200;
}
.edit {
  z-index: 50;
}
.tip {
  margin-left: -20px;
}
.content {
  width: 1022px;
  height: 50px;
  background: #d7d7d7;
  margin-left: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.content span {
  line-height: 50px;
  text-align: left;
}
.editor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(109, 108, 108, 0.5);
  z-index: 1000;
}
.box-card {
  position: absolute;
  margin: auto;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  width: 1000px;
  height: 350px;
  margin: 0 auto;
}
</style>